<template>
	<view class="blessingDetail">
		<view class="bless_text">
			<text style="color:#333;font-size: 28rpx;">祝福码: {{blessInfo.extraction_code}}</text>
			<view class="copy_style" @longtap="copy(blessInfo.extraction_code)">
				<text style="color:#ff5c6d;font-size: 28rpx;">(长按复制)</text>
			</view>
		</view>
		<view class="bless_detail">
			<block>
				<text style="margin-right: 20rpx;">祝福详情:</text>
				<!-- <uni-icons type="download" color="#42b983" size="18" @click="uploadVedio"></uni-icons> -->
				<view class="audio_content" v-if="blessInfo.type==2">
					<view class="audio_pay">
						<image class="audio_pic" src="https://www.xzthealth.com/Public/MallSmallApp/audio_pic.png"></image>
						<image class="audio_play" @tap="playVoice" v-if="isPlay" src="../../../static/images/audio_play_start.png"></image>
						<image class="audio_play" @tap="stopPlay" v-else src="../../../static/images/audio_play_end.png"></image>
					</view>
				</view>
				<view v-else class="tmpvideo">
					<video id="myVideo" controls enable-play-gesture :src="blessInfo.address"></video>
				</view>
				<view class="edit_bless_ways">
					<view class="bless_base " @click="cancelBless">
						<text style="color:#999">取消祝福</text>
					</view>
					<!-- <view style="color:#ccc">|</view> -->
					<view class=" bless_base edit_bless" style="border-color: #ff5c6d;" @click="editBless">
						<text>修改祝福</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	
	const innerAudioContext = uni.createInnerAudioContext();
	const recorderManager = uni.getRecorderManager();
	import {
		handleDownload
	} from '@/utils/downVedio.js'
	export default {
		data() {
			return {
				blessingCode: '', // 祝福码
				blessInfo: {},
				loading: false,
				isPlay: true,
				orderId: ''
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo', this)
		},
		onLoad(options) {
			let orderId = options.orderId
			console.log(orderId, 'orderId')
			if (orderId) {
				this.orderId = options.orderId
			}
		},
		onShow() {
			this.isPlay = true
			let blessInfo = uni.getStorageSync('blessData')
			if (blessInfo.flag == 'isEdit') {
				this.blessInfo = blessInfo
			}
			if (this.orderId) {
				this.getBlessData()
			}
		},
		methods: {
			async getBlessData() {
				let orderId = this.orderId
				const {
					status,
					data,
					message
				} = await this.$request('Blessing/Applets/blessingInfo', {
					orderId: orderId
				});
				try {
					if (status == 1) {
						this.blessInfo = Object.assign(data, {
							orderId: orderId
						})
					} else {
						console.log(message)
					}
				} catch (e) {
					console.log(e)
				}
			},

			playVoice() {
				console.log('播放录音');
				// this.tmpSrc = 'wxfile://tmp_dd29fde7ab24a1e93e843ad09570177f8c0b918d4653ee60.mp3'
				if (this.blessInfo.address) {
					innerAudioContext.src = this.blessInfo.address;
					this.isPlay = false
					innerAudioContext.play()

					innerAudioContext.onEnded(() => {
						this.isPlay = true
					})
				}
			},



			// 播放暂停
			stopPlay() {
				innerAudioContext.pause()
				this.isPlay = true
			},

			uploadVedio() {
				handleDownload(this.blessInfo.address)
			},

			// stopPlayVedio(){
			// 	videoContext.pause()
			// },

			// 取消祝福语
			cancelBless() {
				this.blessInfo.type == 2 ? this.stopPlay() : this.videoContext.pause();
				uni.showModal({
					title: '提示',
					content: '确定要删除祝福吗？删除后将无法添加新的祝福！?',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							const {
								status: status_one,
								message: message_one
							} = await this.$request('Blessing/Applets/deleteBlessing', {
								url: this.blessInfo.address,
								storage_type: this.blessInfo.storage_type
							})
							if (status_one == 1) {
								const {
									status: status_two,
									message: message_two
								} = await this.$request('Blessing/Applets/blessingDelete', {
									orderId: this.blessInfo.orderId,
									extractionCode: this.blessInfo.extraction_code
								})
								console.log(status_two, 'status_two')
								if (status_two == 1) {
									this.blessInfo = {}
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								} else {
									uni.showToast({
										title: '删除记录失败',
										icon: 'none'
									})
								}
							} else {
								uni.showToast({
									title: message,
									icon: 'none'
								})
							}
						}

					},
					fail: () => {
						uni.showToast({
							title: '取消失败',
						})
					},
					complete: () => {}
				});

			},

			// 修改祝福语
			editBless() {
				this.blessInfo.type == 2 ? this.stopPlay() : this.videoContext.pause()
				let _this = this
				let blessData = Object.assign({
					flag: 'isEdit'
				}, _this.blessInfo)
				uni.navigateTo({
					url: `../selectBlessingWays/selectBlessingWays?blessData=${JSON.stringify(blessData)}`
				})
			},

			copy(content) {
				uni.setClipboardData({
					data: content,
					success() {
						uni.getClipboardData({
							success(res) {
								console.log(res.data)
							}
						})
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.blessingDetail {
		width: 680rpx;
		margin: 30rpx auto;
	}

	.bless_text {
		display: flex;
		align-items: center;

		.copy_style {
			border-radius: 16rpx;
			margin-left: 20rpx;

			text {
				color: #fff;
				font-size: 24rpx;
			}
		}
	}

	.bless_detail {
		margin-top: 20rpx;

		.audio_content {
			border: 1rpx solid #ccc;
			width: 90%;
			margin: 30rpx auto;

			.audio_pay {
				display: flex;
				height: 190rpx;
				width: 90%;
				box-sizing: border-box;
				align-items: center;
				margin: 10rpx auto;

				.audio_play {
					height: 80rpx;
					width: 80rpx;
				}

				.audio_pic {
					flex: 1;
					flex-shrink: 0;
					height: 100%;
				}
			}
		}

		.tmpvideo {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
		}


		.edit_bless_ways {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.bless_base {
			width: 48%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 68rpx;
			border-radius: 34rpx;
			border: 1rpx solid #fff;
			// background-color: #666;
			border-color: #999;

			text {
				color: #fff;
			}
		}

		.edit_bless {
			background: linear-gradient(to right, #fc948b, #fc8484, #fc8c84, #fc747c, #fc7c7c, #fc5e6c)
		}

	}
</style>
